/* general overlay */
.w2ui-overlay {
    --tip-size: 10px;
    * { box-sizing: border-box; }

    position: fixed;
    z-index: 1700;
    opacity: 0;
    transition: opacity 0.1s;
    border-radius: 4px;

    .w2ui-draggable {
        cursor: move;
    }

    .w2ui-overlay-body {
        display: inline-block;
        border-radius: 2px;
        padding: 4px 8px;
        margin: 0px;
        font-size: 13px;
        font-family: OpenSans;

        box-shadow: 0 0 10px #00000042;

        color: white;
        border: 1px solid #555;
        background-color: #69717a;
        text-shadow: 0px 1px 1px #444;
        line-height: 1.4;
        letter-spacing: 0.1px;
        overflow: auto;
        /* yellow */
        &.w2ui-light { // default is .w2ui-dark, which is not a real class
            color: #3c3c3c;
            text-shadow: none;
            background-color: #fffde9;
            border: 1px solid #a0a0a0;
            box-shadow: 0 0 10px #00000008;
        }
        /* bright white */
        &.w2ui-white {
            color: #3c3c3c;
            text-shadow: none;
            background-color: #fafafa;
            border: 1px solid #a0a0a0;
            box-shadow: 0 2px 15px #00000008;
            outline: 1px solid white;
        }
        &.w2ui-arrow-right:before {
            content: "";
            position: absolute;
            left: calc(var(--tip-size, 8px) * -0.5 - 1px);
            top: calc(50% - 1px); // for one line tooltips, small adjjustment
            transform: rotate(-45deg) translateY(-50%);
            transform-origin: top center;
            margin: 0;
            border: inherit;
            border-color: inherit;
            background-color: inherit;
            width: var(--tip-size, 8px);
            height: var(--tip-size, 8px);
            border-bottom-right-radius: 200px;
            border-bottom-width: 0;
            border-right-width: 0;
        }

        &.w2ui-arrow-left:after {
            content: "";
            position: absolute;
            right: calc(var(--tip-size, 8px) * -0.5 - 1px);
            top: calc(50% - 1px); // for one line tooltips, small adjjustment
            transform: rotate(135deg) translateY(-50%);
            transform-origin: top center;
            margin: 0;
            border: inherit;
            border-color: inherit;
            background-color: inherit;
            width: var(--tip-size, 8px);
            height: var(--tip-size, 8px);
            border-bottom-right-radius: 200px;
            border-bottom-width: 0;
            border-right-width: 0;
        }

        &.w2ui-arrow-bottom:before {
            content: "";
            position: absolute;
            top: calc(var(--tip-size, 8px) * -0.5);
            left: 50%;
            transform: rotate(45deg) translateX(-50%);
            transform-origin: center left;
            margin: 0;
            border: inherit;
            border-color: inherit;
            background-color: inherit;
            width: var(--tip-size, 8px);
            height: var(--tip-size, 8px);
            border-bottom-right-radius: 200px;
            border-bottom-width: 0;
            border-right-width: 0;
        }

        &.w2ui-arrow-top:after {
            content: "";
            position: absolute;
            bottom: calc(var(--tip-size, 8px) * -0.5 + 3px);
            left: 50%;
            transform-origin: center left;
            transform: rotate(-135deg) translateX(-50%);
            margin: 0;
            border: inherit;
            border-color: inherit;
            background-color: inherit;
            width: var(--tip-size, 8px);
            height: var(--tip-size, 8px);
            border-bottom-right-radius: 200px;
            border-bottom-width: 0;
            border-right-width: 0;
        }
    }
}

/* color overlay */
.w2ui-colors-header {
    padding: 4px 11px;
    border-bottom: 1px solid #dddddd;
    font-weight: bold;
    font-size: 14px;
    cursor: move;
}

.w2ui-colors {
    padding: 8px;
    padding-bottom: 0px;
    background-color: white;
    border-radius: 3px;
    overflow: hidden;
    width: 270px;
    height: 270px;
    user-select: none;

    * { .box-sizing; }

    .w2ui-color-tabs {
        display: flex;
        background-color: #f7f7f7;
        height: 34px;
        margin: 14px -8px 0px -8px;
        border-top: 1px solid #d6d6d6;

        .w2ui-color-tab {
            display: inline-block;
            width: 65px;
            height: 32px;
            border: 0;
            border-top: 2px solid transparent;
            border-radius: 1px;
            margin: -1.5px 4px;
            text-align: center;
            font-size: 15px;
            padding-top: 4px;
            color: #7b7b7b;

            &:hover {
                background-color: #e1e1e1;
            }

            &.w2ui-selected {
                border-top-color: #0175ff;
            }

            .w2ui-icon {
                padding-top: 0;
                margin-top: 3px;
                width: 30px;
                height: 21px;
            }
        }
    }

    .w2ui-tab-content.tab-1 {
        .w2ui-color-row {
            display: flex;
            .w2ui-color {
                cursor: default;
                text-align: center;
                display: inline-block;
                width: 18px;
                height: 18px;
                padding: 6px;
                margin: 1.5px;
                border: 1px solid transparent;
                &:hover {
                    outline: 1px solid #666;
                    border: 1px solid #fff;
                }
                &.w2ui-no-color { // transparent color
                    border: 1px solid #efefef;
                    background: url() 16px 16px;
                }
                &.w2ui-selected:before {
                    content: '\2022';
                    position: relative;
                    left: -1px;
                    top: -8px;
                    color: white;
                    font-size: 14px;
                    text-shadow: 0px 0px 2px #222;
                }
                &.w2ui-color-picker {
                    position: absolute;
                    right: 11px;
                    margin-top: 1px;
                    cursor: pointer;
                    border: 1px solid #b9b5b5;
                    width: 28px;
                    height: 23px;
                    color: #6e7e9f;
                    background-color: #e6e3e3;
                    border-radius: 3px;
                    &:hover {
                        color: #444;
                        outline: 1px solid #888;
                        border: 1px solid #e0e1e5;
                        background-color: #e0e1e5;
                    }
                    .w2ui-icon {
                        position: relative;
                        top: -2px;
                        left: -2px;
                        margin: 0;
                        padding: 0;
                        font-size: 14px;
                        height: 20px;
                    }
                }
            }
        }
    }

    .w2ui-tab-content.tab-2 {
        height: 213px;
        padding: 1px 2px;

        .palette {
            position: relative;
            width: 150px;
            height: 125px;
            outline: 1px solid #d2d2d2;

            .palette-bg {
                height: 100%;
                background-image: linear-gradient(0deg, #000000, rgba(204, 154, 129, 0));
                pointer-events: none;
            }
        }

        .rainbow {
            position: relative;
            width: 150px;
            height: 12px;
            margin: 12px 0px 0px 0px;
            background: linear-gradient(90deg, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
        }

        .alpha {
            position: relative;
            width: 150px;
            height: 12px;
            margin: 14px 0px 0px 0px;
            background-color: #fff;
            background-image: linear-gradient(45deg, #bbb 25%, transparent 25%, transparent 75%, #bbb 75%, #bbb),
                              linear-gradient(45deg, #bbb 25%, transparent 25%, transparent 75%, #bbb 75%, #bbb);
            background-size: 12px 12px;
            background-position:0 0, 6px 6px;

            .alpha-bg {
                height: 100%;
                background-image: linear-gradient(90deg, rgba(80, 80, 80, 0) 0%, rgba(80, 80, 80, 1) 100%);
                pointer-events: none;
            }
        }

        .value1 {
            pointer-events: none;
            position: absolute;
            top: 0px;
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 10px;
            border: 1px solid #999;
            outline: 1px solid #bbb;
            background-color: transparent;
            box-shadow: 0px 0px 1px white;
            transform: translateX(-3px) translateY(-3px);
        }

        .value2 {
            pointer-events: none;
            position: absolute;
            top: -2px;
            display: inline-block;
            width: 8px;
            height: 16px;
            border-radius: 2px;
            border: 1px solid rgb(105, 105, 105);
            background-color: rgb(255, 255, 255);
            box-shadow: 0px 0px 1px white;
            transform: translateX(-1px);
        }

        input.final {
            font-size: 12px;
            border-radius: 2px;
            border: 1px solid #ccc;
            width: 100px;
            padding: 4px;
            color: #333;
            margin-top: 14px;
        }

        .color-info {
            float: right;
            margin-right: -5px;

            .color-preview-bg {
                box-shadow: 0 0 1px #c3c3c3;
                height: 40px;
                background-color: #fff;
                background-image: linear-gradient(45deg, #bbb 25%, transparent 25%, transparent 75%, #bbb 75%, #bbb),
                                  linear-gradient(45deg, #bbb 25%, transparent 25%, transparent 75%, #bbb 75%, #bbb);
                background-size: 16px 16px;
                background-position:0 0, 8px 8px;
                margin-bottom: 10px;
            }

            .color-preview, .color-original {
                height: 40px;
                width: 50px;
                float: left;
            }

            .color-part {
                padding-top: 7px;
                span {
                    display:inline-block;
                    width: 8px;
                    margin: 2px 1px 2px 5px;
                    color: #666;
                }
                input {
                    font-size: 12px;
                    border-radius: 2px;
                    border: 1px solid #ccc;
                    width: 30px;
                    text-align: right;
                    padding: 4px;
                    color: #333;
                }
                &.opacity {
                    margin: 6px 0px 0px 8px;
                    span {
                        width: 42px;
                        margin-left: 0px;
                        margin-top: 5px;
                    }
                    input {
                        width: 38px;
                        margin-left: 6px;
                        text-align: center;
                    }
                }
            }

        }

        .w2ui-color-picker {
            position: relative;
            left: 5px;
            top: 9px;
            display: inline-block;
            cursor: pointer;
            border: 1px solid #b9b5b5;
            width: 28px;
            height: 24px;
            color: #6e7e9f;
            background-color: #e6e3e3;
            border-radius: 3px;
            &:hover {
                color: #444;
                outline: 1px solid #888;
                border: 1px solid #e0e1e5;
                background-color: #e0e1e5;
            }
            .w2ui-icon {
                position: relative;
                top: 2px;
                left: 3px;
                font-size: 14px;
                height: 20px;
            }
        }

    }
}

/* menu overlay */
.w2ui-menu-top,
.w2ui-menu-search {
    position: sticky;
    top: 0;
    background-color: white;
    border-bottom: 1px dotted silver;
}

.w2ui-menu-search {
    padding: 6px 4px;
    .w2ui-icon {
        position: absolute;
        top: 11px;
        left: 6px;
        color: #90819c;
        font-size: 14px;
    }
    #menu-search {
        width: 100%;
        padding: 5px 5px 5px 25px;
    }
}

.w2ui-menu {
    display: block;
    color: black;
    padding: 5px 0px;
    border-radius: 5px;
    overflow-x: hidden;
    cursor: default;
    user-select: none;
    -webkit-user-select: none; // stil need -webkit-user-select to make it work on the iPhone

    .w2ui-menu-item {
        display: flex;
        align-content: stretch;
        padding: 8px 5px;
        user-select: none;

        &.w2ui-even {
            color: @dropdown-item-even-color;
            background-color: @dropdown-item-even-background-color;
        }

        &.w2ui-odd {
            color: @dropdown-item-odd-color;
            background-color: @dropdown-item-odd-background-color;
        }

        &.expanded,
        &:hover {
            background-color: #eaeaea;
        }

        &.w2ui-selected {
            background-color: #e1e7ff;
        }

        &.w2ui-disabled {
            opacity: 0.4;
            color: inherit;
            background-color: transparent;
        }

        .menu-icon {
            flex: none; // do not grow
            width: 26px;
            height: 16px;
            padding: 0;
            margin: 0;

            span {
                width: 18px;
                font-size: 14px;
                color: @drop-menu-image-color;
                display: flex;
                padding-top: 1px;
            }
        }

        .menu-text {
            flex-grow: 1;
            white-space: nowrap;
        }

        .menu-extra {
            flex: none; // do not grow
            min-width: 10px;
            span {
                border: @menu-node-count-border;
                border-radius: 20px;
                width: auto;
                height: 18px;
                padding: 2px 7px;
                margin: 0 0 0 10px;
                background-color: @menu-node-count-background-color;
                color: @menu-node-count-color;
                box-shadow: @menu-node-count-shadow;
                text-shadow: @menu-node-count-text-shadow;
            }
            span.menu-hotkey {
                border: none;
                border-radius: 0px;
                background-color: transparent;
                color: #888;
                box-shadow: none;
                text-shadow: none;
            }
            span.menu-help {
                color: #838383;
                background-color: #f7f7f7;
                border-color: #d1d1d1;
                box-shadow: none;
                padding: 0 4px 0 5px;
                border-radius: 15px;
                position: relative;
                margin-top: -1px;
                display: block;
                height: 20px;
                width: 24px;
                line-height: 1.3;
                text-align: center;
                user-select: none;
                opacity: 0;
                font-family: "Courier New";
                font-size: 15px;
                &:hover {
                    background-color: #edfaf3;
                    border-color: #b3cfc1;
                    color: #199533;
                }
            }
            span.menu-remove {
                background-color: transparent;
                border-color: transparent;
                box-shadow: none;
                padding: 0 4px 0 5px;
                border-radius: 3px;
                position: relative;
                margin-top: -1px;
                display: block;
                height: 20px;
                width: 20px;
                opacity: 0;
                line-height: 1.3;
                text-align: center;
                user-select: none;
                &:hover {
                    background-color: #f9e7e7;
                    border: 1px solid #f1c0c0;
                }
                &:active {
                    background-color: #ffd1d1;
                }
            }
        }

        &:hover {
            .menu-extra span.menu-remove {
                opacity: 1;
            }
            .menu-extra span.menu-help {
                opacity: 1;
            }
        }
    }

    .w2ui-menu-divider {
        padding: 5px;
        .line {
            border-top: 1px dotted silver;
        }

        &.has-text {
            height: 26px;
            background-color: #fafafa;
            border-top: 1px solid #f2f2f2;
            border-bottom: 1px solid #f2f2f2;
            text-align: center;
            .line {
                display: block;
                margin-top: 7px;
            }
            .text {
                display: inline-block;
                position: relative;
                top: -10px;
                background-color: #fafafa;
                padding: 0px 7px;
                color: darkgrey;
            }
        }
    }

    .w2ui-no-items {
        padding: 5px 15px;
        text-align: center;
        color: gray;

        .w2ui-spinner {
            position: relative;
            left: -2px;
            margin-bottom: -5px;
            width: 18px;
            height: 18px;
        }
    }

    .w2ui-sub-menu-box {
        background-color: #fafafd;
        border-top: 1px solid #d6e2e6;
        border-bottom: 1px solid #d6e2e6;
        padding: 0 3px;
    }

    .has-sub-menu {
        .menu-extra span {
            position: relative; // needed for :after to be absolute
            border-color: transparent;
            background-color: transparent;
            box-shadow: none;
            padding: 0px 6px;
            border-radius: 0px;
            margin-left: 5px;
            &:after {
                content: "";
                position: absolute;
                border-left: 5px solid #808080;
                border-top: 5px solid transparent;
                border-bottom: 5px solid transparent;
                transform: rotateZ(0deg);
                pointer-events: none;
                margin-left: -2px;
                margin-top: 4px;
            }
            &:hover {
                border-color: transparent;
                background-color: transparent;
            }
        }
    }
}

// dark menu
.w2ui-overlay .w2ui-overlay-body.w2ui-dark {
    .w2ui-menu-item {
        color: #d9d9d9;
        &.expanded,
        &:hover {
            background-color: #595d67;
        }
        &.w2ui-selected {
            color: white;
            background-color: #4bb8ff;
            text-shadow: 0px 1px 1px #66686d;
        }
        &.w2ui-disabled {
            color: #a3a3a3;
            background-color: inherit;
        }
        .menu-icon span {
            color: inherit;
        }
        .menu-extra span {
            border: 1px solid transparent;
            color: #d9d9d9;
            text-shadow: 0px 0px 1px #141414;
        }
    }
    .w2ui-sub-menu-box {
        background-color: #696f73;
        border-top: 1px solid #434444;
        border-bottom: 1px solid #434444;
    }
    .w2ui-menu .has-sub-menu .menu-extra span:after {
        border-left: 5px solid #eaeaea;
    }
}

/* date overlay */
.w2ui-calendar {
    margin: 0px;
    line-height: 1.1;
    user-select: none;

    &.w2ui-overlay-body {
        border: 1px solid #cccace;
        color: #3c3c3c;
        text-shadow: none;
        background-color: #fff;
        box-shadow: 0 0 10px #00000008;
    }

    .w2ui-cal-title, .w2ui-time-title {
        margin: 0px;
        padding: 7px 2px;
        background-color: #fafafa;
        border-top: 1px solid #fefefe;
        border-bottom:  1px solid #ddd;
        color: #555;
        text-align: center;
        text-shadow: 1px 1px 1px #eee;
        font-size: 16px;

        cursor: pointer;
        .arrow-down {
            position: relative;
            top: -3px;
            left: 5px;
            opacity: 0.6;
        }
    }

    .w2ui-cal-previous,
    .w2ui-cal-next {
        width: 30px;
        height: 30px;
        color: #666;
        border: 1px solid transparent;
        border-radius: 3px;
        padding: 7px 5px;
        margin: -4px 1px 0px 1px;
        cursor: default;
        &:hover {
            color: black;
            border: 1px solid #f5f5f5;
            background-color: #f9f7f7;
        }
        &:active {
            color: black;
            background-color: #f2f1f4;
            border: 1px solid #e6dbfb;
        }
        & > div {
            position: absolute;
            border-left: 4px solid #888;
            border-top: 4px solid #888;
            border-right: 4px solid transparent;
            border-bottom: 4px solid transparent;
            width: 0px;
            height: 0px;
            padding: 0px;
            margin: 3px 0px 0px 0px;
        }
    }

    .w2ui-cal-previous {
        float: left;
        & > div {
            .transform-rotate(-45deg);
            margin-left: 6px;
        }
    }

    .w2ui-cal-next {
        float: right;
        & > div {
            .transform-rotate(135deg);
            margin-left: 2px;
            margin-right: 2px;
        }
    }

    .w2ui-cal-jump {
        display: flex;
        background-color: #fdfdfd;
        .w2ui-jump-month,
        .w2ui-jump-year {
            cursor: default;
            text-align: center;
            border: 1px solid transparent;
            border-radius: 3px;
            font-size: 14px;
        }
        #w2ui-jump-month {
            width: 186px;
            padding: 10px 5px 4px 3px;
            border-right: 1px solid #efefef;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(4, 52px);
            grid-gap: 4px;
            .w2ui-jump-month {
                padding: 15px 0 0 0;
            }
        }
        #w2ui-jump-year {
            width: 90px;
            height: 240px;
            overflow-x: hidden;
            overflow-y: auto;
            margin: 0 2px;
            display: flex;
            flex-wrap: wrap;
            .w2ui-jump-year {
                width: 95%;
                height: 30px;
                padding: 5px 0;
                margin: 1px 0;
            }
        }
        .w2ui-jump-month:hover, .w2ui-jump-year:hover {
            color: black;
            border: 1px solid #f5f5f5;
            background-color: #f9f7f7;
        }
        .w2ui-jump-month.w2ui-selected, .w2ui-jump-year.w2ui-selected {
            color: black;
            background-color: #f2f1f4;
            border: 1px solid #e6dbfb;
        }
    }

    .w2ui-cal-now {
        cursor: default;
        padding: 3px;
        text-align: center;
        background-color: #f4f4f4;
        margin: 5px;
        border: 1px solid #e5e5e5;
        border-radius: 4px;
        &:hover {
            color: #28759e;
            border: 1px solid #c3d6df;
        }
    }

    .w2ui-cal-days {
        width: 280px;
        height: 240px;
        padding: 2px;
        display: grid;
        grid-template-columns: repeat(7, 1fr);



        .w2ui-day {
            border: 1px solid #fff;
            border-radius: 3px;
            color: black;
            background-color: #f7f7f7;
            padding: 8px 0 0 0;
            cursor: default;
            text-align: center;
            &.w2ui-saturday,
            &.w2ui-sunday {
                border: 1px solid #fff;
                color: #c8493b;
                background-color: #f7f7f7;
            }
            &.w2ui-today {
                background-color: #e2f7cd;
            }
            &:hover {
                background-color: #f2f1f4;
                border: 1px solid #e6dbfb;
            }
            &:active {
                background-color: #eeebf3;
                border: 1px solid #cec2e5;
            }
            &.w2ui-selected {
                border: 1px solid #8cb067;
            }
            &.w2ui-weekday {
                text-align: center;
                background-color: #fff;
                color: #a99cc2;
                &:hover {
                    border: 1px solid #fff;
                    background-color: #fff;
                }
            }
            &.outside {
                color: #b5b5b5;
                background-color: #fff;
            }
            &.w2ui-blocked {
                color: #555;
                background-color: #fff;
                border: 1px solid #fff;
                &:after {
                    content: " ";
                        position: absolute;
                        color: #b3b3b378;
                        font-size: 27px;
                        padding: 0px;
                        font-family: verdana;
                        transform: translate(-15px, 15px) rotate(-36deg);
                        border-top: 1px solid #c9c2c2;
                        width: 24px;
                        transform-origin: top left;
                }
            }
        }
    }
}

/* time overlay */
.w2ui-cal-time {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background-color: #ffffff;;
    cursor: default;

    .w2ui-cal-column {
        width: 90px;
        display: flex;
        flex-wrap: wrap;
        padding: 4px;

        &:nth-child(even) {
            background-color: #fafafa;
        }

        span {
            width: 100%;
            padding: 8px;
            margin: 1px;
            text-align: center;
            border: 1px solid transparent;
            border-radius: 2px;
            white-space: nowrap;
            &:hover {
                background-color: #f2f1f4;
                border: 1px solid #e6dbfb;
            }
            &:active {
                background-color: #eeebf3;
                border: 1px solid #cec2e5;
            }
            &.w2ui-blocked {
                pointer-events: none;
                text-decoration: line-through;
                color: silver;
            }
        }
    }
}